 //1.公用样式
 require('../../assets/css/index.js')
 //当前页面样式
 require('./badge.less')

//2.公用js
let dom=require('../../utils/dom.js');
let http=require('../../utils/http.js');
let https=require('../../utils/https.js');
// let userdata=JSON.parse(localStorage.getItem('retail'))


//3.当前页面效果
// console.log(dom);
//相当于文档加载事件
dom.ready(function(){
    
    let returnBtn=dom.getById('.return-btn');//返回我的
    let motionDuration=document.querySelector('.motion-duration')//徽章大盒子
    let rankingNumber=dom.getById('.ranking-number');//获取徽章个数
    let meng=document.querySelector('.meng');//meng
    let hader=document.querySelector('.hader');//meng头
    let contentimg=document.querySelector('.contentimg');//meng内容

    let arr=[require('../../assets/imgs/mybadge01.jpg'),
    require('../../assets/imgs/mybadge02.jpg'),
    require('../../assets/imgs/mybadge03.jpg'),
    require('../../assets/imgs/mybadge04.jpg'),
    require('../../assets/imgs/mybadge05.jpg'),
    require('../../assets/imgs/mybadge06.jpg'),
    require('../../assets/imgs/mybadge07.jpg'),
    require('../../assets/imgs/mybadge08.jpg'),
    require('../../assets/imgs/mybadge09.jpg'),
    ]
    function showpage(){
       
          https.get('/api/exercise/badge',function(res){
            if (res.errno==0) {
                
                // 渲染徽章个数
                rankingNumber.innerText=res.data.length
                let html=''
                let menghtml=''
                res.data.map(function(v,i){
                    // console.log(v.id);

                    html+=`
                    <div class="badge-option df fdc jcsb aic">
                        <img class="badge-img badge-img1 showmeng" data-id=${i} src="${arr[i]}" alt="">
                        <div class="badge-title ta">${v.name}</div>
                    </div>
                
                `
                })
                motionDuration.innerHTML=html
            }
        })
    }

    showpage()

    motionDuration.addEventListener('click',function(event){
        let num=event.target.dataset
        if (num.id) {
            meng.classList.add('showmeng')
        }
        https.get('/api/exercise/badge',function(res){
            if (res.errno==0) {
                // 渲染徽章个数
                let menghtml=''
                res.data.filter(function(v,i){
                //    console.log(v);
                   if (i==num.id) {
                    menghtml=`
                        <div class="imgbox ta">
                            <div class="img">
                                <img src="${arr[num.id]}" alt="">
                            </div>
                            <div class="title fs24">${v.detail.name}</div>
                            <div class="text fs18">${v.detail.desc}</div>
                        </div>
                        <div class="badgeTime">${v.date}获得</div>
                
                    `
                   }
                    
                })
                
                contentimg.innerHTML=menghtml
                
            }
         
        })
         
 
    })




    //返回我的
    returnBtn.addEventListener('click',function(){
        window.history.go(-1);
    })
   
    // 返回徽章
    hader.addEventListener('click',function(){
        meng.classList.remove('showmeng')
    })

})


